<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>艺术精品详情</text>
			<image src="/static/svg/moer11.svg" @tap="toShowMenu"  class="header-right-img" slot="right"></image>
		</pageHeader>
		<swiper class="swiper"  circular>
			<swiper-item v-for="(item,index) in imgPathList" :key='index'>
				<view class="banner_img">
					<image :src="item" mode="aspectFill"  ></image>
					<text>{{index+1}}/{{imgPathList.length}}</text>
				</view>
			</swiper-item>
		</swiper>
		<view style="background-color: #FFFFFF;">
			<view class="author_message">
				<image :src="message.userImage?message.userImage:'/static/img/toux2x.png'" mode=""  @tap="toPersonalDeail" :data-userid="message.userId"  data-type='艺术精品'></image>
				<view >
					<text>{{message.userName}}</text>
					<text class="time">{{message.addTime}}</text>
				</view>
			</view>
			<text class="title" v-if="message.fineTitle">{{message.fineTitle}}</text>
			<text class="content" v-if="message.fineContent" >{{message.fineContent}}</text>
			<view class="products">
				<productLink :width='linkList.length>1?"636rpx":"690rpx"'  :isNeedDele='false' :isNeedCart='true' :backgroundColor='"#F4F4F4"' v-for='(item,index) in linkList' :key='index' :index='index' :message='item?item:{}'/>
				<view style="width:1rpx;min-width: 1rpx;"></view>
			</view>
			<view style="height: 1rpx;background-color: #EEEEEE;width: 690rpx;margin-left: 30rpx;margin-top: 30rpx"></view>
		</view>
		<conciseComment :list='messageList' @praise='commentPraise' @dele='getThreeComment' @toMore='toAllComment'/>
		<view class="lookAndLook_title" v-if="lookList.length>0">
			<view></view>
			<text>看了又看</text>
			<view></view>
		</view>
		<view style="width: 750rpx;margin-top:-30rpx;"  :style="{height:height}" v-if="lookList.length>0">
			<xgWaterfall :columnCount="2"   :left-gap='"30rpx"' :right-gap='"30rpx"' :column-gap='"30rpx"' @success='success' :list='lookList'>
				<xgWaterfallItem  v-for='(item,index) in lookList' :key='index' >
					<fineArt :message='item' @praise='fineArtPraise' :index='index'/>
				</xgWaterfallItem>
			</xgWaterfall>
		</view>
		<view style="height:118rpx"></view>
		<productFooter :message='message' @collect='collect' @praise='praise' :isInDetail='true'/>
		<menu1 v-model="menuShow"></menu1>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_body">
				<view class="popup_body_body" @tap="toDeleDesign">
					<image src="/static/svg/deleDesign.svg" mode=""></image>
					<text>删除</text>
				</view>
				<view class="cancel" @tap="popup_cancel" style="border-bottom: 0;">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import conciseComment from "@/components/comment/conciseComment.vue"
	import pageHeader from "@/components/header/header.vue"
	import productLink from "@/components/ReleaseFineArt/productLink.vue"
	import productFooter from "@/components/footer/productFooter.vue"
	import xgWaterfall from "@/components/xg-waterfall/xg-waterfall.vue"
	import xgWaterfallItem from "@/components/xg-waterfall-item/xg-waterfall-item.vue"
	import menu1 from "@/components/menu/menu.vue"
	import fineArt from "@/components/index/fineArt.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {pageHeader,productLink,conciseComment,xgWaterfall,xgWaterfallItem,productFooter,fineArt,menu1,uniPopup},
		data() {
			return {
				imgPathList:[],
				linkList:[],
				title:"",
				content:"",
				height:"",
				menuShow:false,
				id:"",
				state:"",
				messageList:[],
				message:{},
				lookList:[],
				examine:false
			};
		},
		onLoad(e) {
			this.id=e.fineId
			this.state=e.State
			if(e.examine||e.examine==0){
				this.examine=e.examine.toString()
			}
		},
		onShow() {
			this.getMessage()
			this.getThreeComment()
		},
		methods: {
			async getThreeComment(e){
				if(e){
					this.message.discussNumber-=1
				}
				let data={}
				data.answerId=this.id
				data.state=3
				data.userId=localStorage.getItem("userId")
				let res=await urls.threeComment(data)
				this.messageList=res.data
			},
			async getMessage(){
				let data={}
				data.fineId=this.id
				data.userId=localStorage.getItem("userId")
				data.state=this.state
				let res=await urls.fineArtspecific(data)
				this.lookList=res.data.fineArticles
				this.message=res.data.specific
				this.imgPathList=this.message.fineImage.split(",")
				this.linkList=res.data.shop
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			success(e){
				this.height=e+'px'
			},
			toShowMenu(){
				if(this.examine){
					this.$refs.popup.open()	
					return
				}
				this.menuShow=true
			},
			popup_cancel(){
				this.$refs.popup.close()
			},
			toDeleDesign(){
				this.popup_cancel()
				uni.showModal({
					content: '确定要删除吗？',
					cancelText:'取消',
					confirmText:'确定',
					success:async (res)=> {
						if (res.confirm) {
							let data={},res
							data.fineId=this.id
							data.state=this.examine
							res=await urls.deleteArtDraft(data)
							if(res.code==0){
								uni.showToast({
								    title: '删除成功',
								    duration: 2000
								})
								setTimeout(()=>{
									uni.navigateBack({
										delta: 1
									})
								},2000)
							}
						}
					}
				})	
			},
			commentPraise(index,isAlready){
				if(!isAlready){
					this.messageList[index].zan="1"
					this.messageList[index].zanNumber-=1
				}else{
					this.messageList[index].zan="0"
					this.messageList[index].zanNumber+=1
				}	
			},
			toAllComment(){
				localStorage.setItem("designMessage",JSON.stringify(this.message))
				uni.navigateTo({
					url: '/pages/homeDesign/allComment?id='+this.id+"&state="+3
				})
			},
			collect(isAlready){
				if(!isAlready){
					this.message.collection="1"
					this.message.collectionNumber-=1
				}else{
					this.message.collection="0"
					this.message.collectionNumber+=1
				}	
			},
			praise(isAlready){
				if(!isAlready){
					this.message.zan="1"
					this.message.zanNumber-=1
				}else{
					this.message.zan="0"
					this.message.zanNumber+=1
				}	
			},
			fineArtPraise(index,isAlready){
				if(!isAlready){
					this.lookList[index].zan="1"
					this.lookList[index].zanNumber-=1
				}else{
					this.lookList[index].zan="0"
					this.lookList[index].zanNumber+=1
				}	
			},
		},
	}
</script>

<style lang="scss">
page{
	background-color: #F5F5F5;	
}
.header-right-img{
	height: 50rpx;
	width: 50rpx;
	margin-right: 29rpx;
}
.swiper{
	height: 750rpx;
	width: 750rpx;
}
.banner_img{
	height: 750rpx;
	width: 750rpx;
	position: relative;
	image{
		height: 100%;
		width: 100%;
		display: block;
	}
	text{
		display: block;
		position: absolute;
		bottom: 16rpx;
		right: 16rpx;
		height: 40rpx;
		padding: 0 18rpx;
		background-color: #C1AF99;
		border-radius: 22rpx;
		line-height:40rpx ;
		color: #FFFFFF;
		font-size: 24rpx;
		letter-spacing: 1rpx;
	}
}
.author_message{
	padding-top:30rpx;
	padding-left: 30rpx;
	display: flex;
	align-items: center;
	image{
		height: 80rpx;
		width: 80rpx;
		border-radius: 50%;
	}
	view{
		height: 80rpx;
		display: flex;
		flex-flow: column;
		justify-content: space-between;
		margin-left: 16rpx;
		text{
			font-size: 30rpx;
			color: #333333;
			font-weight: bold;
			position: relative;
			top: 6rpx;
			line-height: 30rpx;
			letter-spacing: 1rpx;
		}
		.time{
			font-size: 24rpx;
			color: #999999;
			line-height: 24rpx;
			font-weight: normal;
			top: unset;
			bottom: 6rpx;
		}
	}
}
.title{
	font-size: 32rpx;
	line-height: 36rpx;
	letter-spacing: 2rpx;
	color: #333333;
	font-weight: bold;
	display: inline-block;
	margin: 30rpx 30rpx 0;
}
.content{
	display: inline-block;
	font-size: 28rpx;
	letter-spacing: 2rpx;
	color: #333333;
	line-height: 42rpx;
	margin: 30rpx 30rpx 0;
	width: 690rpx;
	text-align: justify;
}
.products{
	display: flex;
	padding: 0 30rpx 0;
	width: 750rpx;
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	view{
		min-width:636rpx ;
	}
}
.lookAndLook_title{
	height: 128rpx;
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		height: 1px;
		background-color: #DDDDDD;
		width: 166rpx;
	}
	text{
		font-size: 28rpx;
		color: #666666;
		letter-spacing: 1rpx;
		margin: 0 30rpx;
	}
}
.popup_body{
	position: absolute;
	bottom: 43rpx;
	left:25rpx;
	width: 700rpx;
	background-color: #FFFFFF;
	border-radius: 25rpx;
	height: unset!important;
	view{
		width: 100%!important;
		height: 113rpx;
		border-bottom: 1rpx solid #D8D8D8;
		font-size: 34rpx;
		color: #A66354;
		line-height:112rpx ;
		text-align: center;
	}
	.popup_body_body{
		height: 113rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			height: 32rpx;
			width: 32rpx;
		}
		text{
			font-size: 34rpx;
			color:#A66354 ;
			letter-spacing: 1rpx;
			line-height: 34rpx;
			margin-left: 12rpx;
		}
	}
	.cancel{
		color: #999999;
	}
}
</style>
